<template>
	<div>
		<ul ref="list">
			<li v-for="(item,i) in list" :key="i">{{item}}</li>
		</ul>
		<button ref="loadingMore">加载更多。。。</button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			list: [],
		};
	},
	created() {
		for (let i = 1; i < 30; i++) this.list.push(i);
	},
	methods: {
		handleScroll() {
			let scrollTop = document.documentElement.scrollTop; // 滚动条偏移量
			let innerHeight = window.document.documentElement.scrollHeight; // 页面总高度
			let clientHeight = document.documentElement.clientHeight; // 窗口可视范围高度
			if (scrollTop + clientHeight >= innerHeight) {
				for (let i = 1; i < 30; i++) this.list.push(i);
			}
		}
	},
	mounted() {
		window.addEventListener("scroll", this.handleScroll);
	}
};
</script>

<style lang="scss" scoped>
</style>